<template>
  <body>
  <div>
<!--    <img src="../assets/bg.jpg" class="pic">-->
    <img src="../assets/night.jpg" class="body1">
    <h1 class="title21">欢迎加入智慧家园</h1>
    <div class="bian1">
      <form>
        <div class="class21">姓 &nbsp&nbsp 名&nbsp; : &nbsp;<input id=name @blur="checkName()" type="text" class="input-2"
                                                       v-model="registeredForm.name">
          <span id="s_user" class="error"></span>
          <div class="tishi">3-20位,无特殊字符,必须有字母</div>
        </div>
        <div class="class22">账 &nbsp&nbsp 号&nbsp; : &nbsp;<input id=id type="text" @blur="checkAccount" class="input-2"
                                                       v-model="registeredForm.account">
          <span id="i_user" class="error"></span>
        </div>
        <div class="class23">电 &nbsp&nbsp 话&nbsp;  :&nbsp;  <input id=id type="text" @blur="checkTele" class="input-2"
                                                       v-model="registeredForm.tele">
          <span id="i_tele" class="error"></span>
        </div>
        <div class="class24">默认地址&nbsp; : <input id=id type="text" class="input-2"
                                                           v-model="registeredForm.defaultTradePlace">
          <div class="tishi">密码不少于六位，含数字字母</div>
        </div>
        <div class="class25">密 &nbsp&nbsp 码 &nbsp;: &nbsp;<input id=pwd type="password" @blur="checkpwd" class="input-2"
                                                       v-model="registeredForm.password">
          <span id="p_user" class="error"></span>
        </div>
        <div class="class26">确认密码 &nbsp;: <input id=repwd type="password" @blur="confirmpwd" class="input-2">
          <span id="r_user" class="error"></span>
        </div>
      </form>
      <div>
        <el-button type="primary" class="class27" @click="registered">确认</el-button>
      </div>
      <div class="con1">
        <tr>请上传户口本进行安全验证</tr>
            <input
                type="file"
                id="idd"
                name="image"
                class="getImgUrl_file"
                @change="shangc($event)"
                accept="image/jpg, image/jpeg, image/png"
            />
<!--        <br/>-->
<!--        <img :src="picPath" alt="">-->
        <tr  v-if="Data" v-for="item in Data"  >
          <tr>姓名:{{item.Name.words}}</tr>
          <tr>所在地:{{item.Hometown.words}}</tr>
        </tr>
      </div>
      <div class="con2">
        <tr>请上传身份证正面进行安全验证</tr>
        <input
            type="file"
            id="idc"
            name="image"
            class="getImgUrl_file"
            @change="shangch($event)"
            accept="image/jpg, image/jpeg, image/png"
        />
        <!--        <br/>-->
        <!--        <img :src="picPath" alt="">-->
        <tr  v-if="Data1" v-for="item in Data1"  >
          <td>身份证号码:{{item.公民身份号码.words}}</td>
        </tr>
      </div>

    </div>
  </div>
  </body>
</template>

<script>
import request from "@/utils/request";
import router from "@/router";

export default {
  name: "UserRegiest",
  data() {
    return {
      picPath:'',
      Data: [],
      Data1: [],
      registeredForm: {
        name: '',
        account: '',
        tele: '',
        defaultTradePlace: '',
        password: ''
      },
      flag1: false,
      flag2: false,
      flag3: false,
      flag4: false,
      flag5: false,
    }
  },
  methods: {
    registered() {
      if (this.flag1 != false && this.flag2 != false && this.flag3 != false && this.flag4 != false && this.flag5 != false) {
        request.post("http://localhost:8082/user/register", this.registeredForm).then(res => {
          if (res.flag) {
            router.push({path: '/front/login'});
            this.$message({
              type: 'success',
              message: res.msg
            })
          } else {
            this.$message.error(res.msg)
            this.account = ''
            this.password = ''
          }
        })
      }
    },
     checkName() {
      let name = this.registeredForm.name
      let s_user = document.getElementById("s_user")
      let reg_name = /[\u4E00-\u9FA5]{2,5}$/;
      let flag = reg_name.test(name);
      if (flag) {
        s_user.innerHTML = "格式正确";
        this.flag1 = true;
      } else {
        s_user.innerHTML = "用户名格式有误！";
        this.flag1 = false;
      }
      return flag;
    },
    checkAccount() {
      let id = this.registeredForm.account
      let i_user = document.getElementById("i_user");
      if ((id.length <= 20 && id.length >= 3) && id.match(/[a-zA-Z]/) && !id.match(/[^a-zA-Z0-9]/)) {
        i_user.innerHTML = "格式正确";
        this.flag2 = true;
        return true;
      } else {
        i_user.innerHTML = "账号格式有误！";
        this.flag2 = false;
        return false;
      }
    },
    checkTele() {
      let tele = this.registeredForm.tele
      let i_tele = document.getElementById("i_tele");
      if (tele.match(/^1[3-9]\d{9}$/)) {
        i_tele.innerHTML = "格式正确";
        this.flag3 = true;
        return true;
      } else {
        i_tele.innerHTML = "电话号码有误!";
        this.flag3 = false;
        return false;
      }
    },
    checkpwd() {
      let pwd = this.registeredForm.password
      let p_user = document.getElementById("p_user");
      let reg_pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
      let flag = reg_pwd.test(pwd);
      if (flag) {
        p_user.innerHTML = "格式正确";
        this.flag4 = true;
      } else {
        p_user.innerHTML = "密码格式有误！";
        this.flag4 = false;
      }
      return flag;
    },
    confirmpwd() {
      let pwd = this.registeredForm.password
      let repwd = document.getElementById("repwd").value;
      let r_user = document.getElementById("r_user");
      if (pwd != repwd) {
        r_user.innerHTML = "两次密码不一致";
        this.flag5 = false;
      } else {
        r_user.innerHTML = "";
        this.flag5 = true;
      }
    },
    shangc(e) {
          let files = document.getElementById("idd").files[0];
          let name = document.getElementById("idd").files[0].name;
          // this.picPath=document.getElementById("idd").value

          let arr = name.split(".");
          let fileSize = 0;
          let fileMaxSize = 10240; //1M
          if (files) {
            fileSize = files.size;
            if (fileSize > 10 * 1024 * 1024) {
              alert("文件大小不能大于10M！");
              file.value = "";
              return false;
            } else if (fileSize <= 0) {
              alert("文件大小不能为0M！");
              file.value = "";
              return false;
            }
          } else {
            return false;
          }
          //转码base64
          let reader = new FileReader();
          let imgFile;
          // let that = this
          reader.readAsDataURL(files);
          reader.onload = async e => {
            imgFile = e.target.result;
            let arr = imgFile.split(",");
            this.faceBase64 = arr[1];
            this.picPath='data:image/jpg;base64,'+arr[1]
            console.log(imgFile)
            const params = new FormData(); // 声明formData数据类型
            params.append("image", imgFile); //图片base64
            params.append("access_token", '24.e517edb5976943a9240f76080b4e7c2f.2592000.1714650122.282335-59429161'); //access_token
            request.post("/baiduApi/rest/2.0/ocr/v1/household_register", params, {
                  headers: {
                    "Content-Type": "application/x-www-form-undefined",
                  },
                })
                .then((res) => {
                  this.Data.push(res.words_result);
                });
            console.log('111',this.Data);
          };
      },
    shangch(e) {
      let files = document.getElementById("idc").files[0];
      let name = document.getElementById("idc").files[0].name;
      // this.picPath=document.getElementById("idc").value

      let arr = name.split(".");
      let fileSize = 0;
      let fileMaxSize = 10240; //1M
      if (files) {
        fileSize = files.size;
        if (fileSize > 10 * 1024 * 1024) {
          alert("文件大小不能大于10M！");
          file.value = "";
          return false;
        } else if (fileSize <= 0) {
          alert("文件大小不能为0M！");
          file.value = "";
          return false;
        }
      } else {
        return false;
      }
      //转码base64
      let reader = new FileReader();
      let imgFile;
      // let that = this
      reader.readAsDataURL(files);
      reader.onload = async e => {
        imgFile = e.target.result;
        let arr = imgFile.split(",");
        this.faceBase64 = arr[1];
        this.picPath='data:image/jpg;base64,'+arr[1]
        console.log(imgFile)
        const params = new FormData(); // 声明formData数据类型
        params.append("image", imgFile); //图片base64
        params.append("access_token", '24.e517edb5976943a9240f76080b4e7c2f.2592000.1714650122.282335-59429161'); //access_token
        params.append("id_card_side",'front')
        request.post("/baiduApi/rest/2.0/ocr/v1/idcard", params, {
          headers: {
            "Content-Type": "application/x-www-form-undefined",
          },
          // form: {
          //   'id_card_side': 'front',
          // }
        })
            .then((res) => {
              this.Data1.push(res.words_result);
            });
        console.log('111',this.Data1);
      };
    },
  }
}
</script>

<style>
.title21 {
  position: absolute;
  margin-left: 38%;
  top: 80px;
  color: #ffffff90;
}
.input-2{
  border: 0;
  width: 48%;
  font-size: 15px;
  color: #070000;
  background: transparent;
  border-bottom: 2px solid #0a0000;
  outline: none;
  margin-top: 10px;
}
.class21 {
  /* display: inline-flex; */
  position: absolute;
  top: 50px;
  margin-left: 5%;
  text-align: center;
  font-family: fantasy;
}

.class22 {
  /* display: inline-flex; */
  position: absolute;
  top: 95px;
  margin-left: 5%;
  text-align: center;
  font-family: fantasy;
}

.class23 {
  /* display: inline-flex; */
  position: absolute;
  top: 140px;
  margin-left: 5%;
  text-align: center;
  font-family: fantasy;
}

.class24 {
  /* display: inline-flex; */
  position: absolute;
  top: 195px;
  margin-left: 3%;
  text-align: center;
  font-family: fantasy;
}

.class25 {
  /* display: inline-flex; */
  position: absolute;
  top: 240px;
  margin-left: 5%;
  text-align: center;
  font-family: fantasy;
}

.class26 {
  /* display: inline-flex; */
  position: absolute;
  top: 295px;
  margin-left: 3%;
  text-align: center;
  font-family: fantasy;
}

.class27 {
  position: absolute;
  margin-left: 29%;
  top: 370px;
  width: 260px;
  height: 35px;
  border-radius: 5px;
  font-size: 20px;
}

.text21 {
  height: 25px;
  width: 300px;
}

.tishi {
  float: bottom;
  color: rgb(163, 156, 146);
  font-size: 12px;
  align-self: center;
}
.pic{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}
.getImgUrl_file{
  margin-top: 10px;
}
.bian1{
  position: absolute;
  margin-top: 10%;
  margin-left: 20%;
  width:  800px;
  height:500px;
  z-index: -1;
  background: linear-gradient(to bottom right, #f9fbfc, #fbfbfc, #f6f6f6);
  box-shadow: 20px 20px 10px 3px #000; /*Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+*/
  -webkit-box-shadow: 10px 8px 10px 3px #000;
  -moz-box-shadow: 10px 8px 10px 3px #000;
  *background-clip: padding-box;
  opacity: 0.9; /*透明度*/
}
.con1{
  position: absolute;
  top:40px;
  margin-left: 65%;
}
.con2{
  position: absolute;
  margin-top: 190px;
  margin-left: 65%;
}
</style>
